<!--
 * @Description: 任务属性面板
 * @Author: DHL
 * @Date: 2022-07-11 08:18:22
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-12 10:31:34
-->

<template>
  <div class="process-panel-tab__content">
    <el-form ref="dbFormRef" label-width="80px">
      <el-form-item label="异步延续">
        <el-checkbox
          v-model="taskForm.asyncBefore"
          label="异步前"
          @change="handleChangeTaskAsync()"
        />
        <el-checkbox
          v-model="taskForm.asyncAfter"
          label="异步后"
          @change="handleChangeTaskAsync()"
        />
        <el-checkbox
          v-model="taskForm.exclusive"
          label="排除"
          v-if="taskForm.asyncAfter || taskForm.asyncBefore"
          @change="handleChangeTaskAsync()"
        />
      </el-form-item>
    </el-form>

    <user-task v-if="bpmnStore.activatedElementType === 'UserTask'"></user-task>
    <script-task v-if="bpmnStore.activatedElementType === 'ScriptTask'"></script-task>
    <receive-task v-if="bpmnStore.activatedElementType === 'ReceiveTask'"></receive-task>
  </div>
</template>

<script lang="ts">
  export default { name: 'PanelTask' }
</script>

<script setup lang="ts">
  import { useBpmnStore } from '../../store/bpmn'
  import UserTask from './components/userTask/userTask.vue'
  import ScriptTask from './components/scriptTask.vue'
  import ReceiveTask from './components/receiveTask.vue'

  const bpmnStore = useBpmnStore()

  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          Object.assign(taskForm, {
            asyncAfter: bpmnStore.activatedElement.businessObject.asyncAfter,
            asyncBefore: bpmnStore.activatedElement.businessObject.asyncBefore,
            exclusive: bpmnStore.activatedElement.businessObject.exclusive
          })
        })
      }
    }
  )

  const taskForm: any = reactive({
    asyncAfter: false,
    asyncBefore: false,
    exclusive: false
  })

  function handleChangeTaskAsync() {
    if (!taskForm.asyncBefore && !taskForm.asyncAfter) {
      taskForm.exclusive = false
    }

    bpmnStore.updateProperties({
      ...taskForm
    })
  }
</script>

<style scoped lang="scss"></style>
